<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" :destroy-on-close="true" @opened="opensData" :with-header="false" class="demand_box" size='960px' @close="closeData">
        <div class="flexbox flexcolumn height_100">
            <div class="demand_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="ana_img">
                        <img :src="baseInfo.material+'&x-oss-process=video/snapshot,t_0,f_jpg'" alt="" class="logo_img">
                        <div class="ana_type" :class="[baseInfo.material_type==1?'ana_type_blue':'ana_type_green']">{{baseInfo.material_type==1?'自制':'外部'}}</div>
                    </div>
                    <div class="ana_info">
                        <div class="ana_name">{{baseInfo.material_name}}</div>
                        <div class="flexbox flexcenter ana_base">
                            <div class="ana_time">ID：{{queryInfo.material_id}}</div>
                            <div class="ana_time">时长：{{secondToTimeStr(baseInfo.duration)}}</div>
                            <div class="ana_time">创建时间：{{baseInfo.create_time}}</div>
                        </div>
                    </div>
                </div>
                <span class="icon_btn icon_btn_32" @click="closeData"><img src="@/assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="ana_tips flexbox flexcenter">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.3331 6.66673C13.3331 8.93596 11.9159 10.8742 9.91825 11.6446H7.99975H6.08125C4.08361 10.8742 2.66641 8.93596 2.66641 6.66673C2.66641 3.7212 5.05421 1.3334 7.99975 1.3334C10.9453 1.3334 13.3331 3.7212 13.3331 6.66673Z" fill="#4475FF" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9.91827 11.6445L9.6919 14.361C9.6775 14.5338 9.53307 14.6667 9.3597 14.6667H6.6398C6.46644 14.6667 6.322 14.5338 6.30764 14.361L6.08124 11.6445" stroke="#4475FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M5.60001 4.8V8L8.00001 6.4L10.4 8V4.8" stroke="white" stroke-width="1.12" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <span class="font_14 color_01" style="margin-left:10px">当日消耗小于 100 元无数据</span>
                </div>
                <div class="flexbox flexcenter flexbetween ana_day">
                    <span class="font_16 color_01">互动数据</span>
                    <el-date-picker style="width:260px" @change="selectTime" :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="queryInfo.date" type="daterange" :clearable="false" size="small" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>

                <div class="ana_big flexbox border pd_20 mt_20">
                    <div class="big_left">
                        <video id="media" :src="baseInfo.material" preload controls></video>
                    </div>
                    <div class="big_right flex" v-loading="loading1" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <div id="timeChart" style="height:374px;width:100%" ref="echarts"></div>
                    </div>
                </div>

                <div class="flexbox flexcenter flexbetween mt_20">
                    <span class="font_16 color_01">人群分析</span>
                    <div class="flexbox flexcenter ">
                        <span class="font_14 color_02">展示指标：</span>
                        <el-select v-model="queryInfo.show_types" @change="selectTime" placeholder="请选择" size="small" style="width:120px">
                            <el-option v-for="item in analysisList" :key="item.value" :label="item.title" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="border renqu_box mt_20" v-loading="loading2" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="ana_title">八大人群分布</div>
                    <div id="rqChart" style="height:350px;width:100%"></div>
                </div>

                <div class="border renqu_box mt_20" v-loading="loading3" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                    <div class="flexbox flexcenter flexbetween">
                        <div class="ana_title">地域分布</div>
                        <el-radio-group v-model="queryInfo.region_type" size="mini" @change="selectRegion">
                            <el-radio-button :label="1">按省份</el-radio-button>
                            <el-radio-button :label="2">按城市</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div id="dyChart" style="height:350px;width:100%"></div>
                </div>

                <div class="flexbox flexcenter mt_20">
                    <div class="age_box flex border pd_20" v-loading="loading4" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <div class="ana_title">年龄分布</div>
                        <div id="ageChart" style="height:300px;width:100%"></div>
                    </div>
                    <div class="age_box flex border pd_20 age_mg" v-loading="loading5" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <div class="ana_title">性别分布</div>
                        <div id="sexChart" style="height:300px;width:100%"></div>
                    </div>
                    <div class="age_box flex border pd_20" v-loading="loading6" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
                        <div class="ana_title"><span class="first_text" @click="retureFirst">行业品类核心人群</span> <span class="blue_text">{{seconText}}</span></div>
                        <div id="hyChart" style="height:300px;width:100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
import { analysisList } from "@/assets/js/material";
export default {
    name: "",
    data() {
        return {
            loading1: false,
            loading2: false,
            loading3: false,
            loading4: false,
            loading5: false,
            loading6: false,
            is_show1: true,
            is_show2: true,
            is_show3: true,
            is_show4: true,
            is_show5: true,
            is_show6: true,
            seconText: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e7;
                },
            },
            dialogVisible: false,
            baseInfo: {
                material_name: "",
                duration: 0,
                create_time: "",
                material_type: "",
                material: "",
            },
            analysisList: [],
            queryInfo: {
                material_id: "",
                types: "",
                show_types: "stat_cost",
                date: [],
                region_type: 1,
                tag_level: 1,
                tag_id: "",
            },
            durationData: [
                {
                    name: "click_cnt",
                    title: "点击次数",
                    value: [],
                },
                {
                    name: "dy_like",
                    title: "点赞次数",
                    value: [],
                },
                {
                    name: "dy_comment",
                    title: "评论数",
                    value: [],
                },
                {
                    name: "dy_follow",
                    title: "新增粉丝数",
                    value: [],
                },
                {
                    name: "user_lose_cnt",
                    title: "流失数",
                    value: [],
                },
            ],
            x_duration: [],
        };
    },
    created() {},
    mounted() {},
    methods: {
        // 打开加载
        opensData() {
            this.analysisList = analysisList;
            this.getTimeFn();
            this.getDuration("duration");
            this.getCrowd("eight_audience");
            this.getRegion("region");
            this.getAge("age");
            this.getGender("gender");
            this.getCategory("audience_category");
        },

        // 关闭重置
        closeData() {
            this.dialogVisible = false;
        },

        // 时间选择
        selectTime() {
            this.getDuration("duration");
            this.getCrowd("eight_audience");
            this.getRegion("region");
            this.getAge("age");
            this.getGender("gender");
            this.getCategory("audience_category");
        },

        selectRegion() {
            this.getRegion("region");
        },

        // 默认显示3天时间
        getTimeFn() {
            const that = this;
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
            that.$set(that.queryInfo.date, 0, that.formatDate(start));
            that.$set(that.queryInfo.date, 1, that.formatDate(end));
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + "-" + mymonth + "-" + myweekday;
        },

        // 秒数转换
        secondToTimeStr(t) {
            if (!t) return;
            if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
            if (t < 3600)
                return (
                    "" +
                    ((a = parseInt(t / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            if (3600 <= t) {
                var a,
                    i,
                    e = parseInt(t / 3600);
                return (
                    (e < 10 ? "0" + e : e) +
                    ":" +
                    ((a = parseInt((t % 3600) / 60)) < 10 ? "0" + a : a) +
                    ":" +
                    ((i = t % 60) < 10 ? "0" + i : i)
                );
            }
        },

        //获取互动数据
        async getDuration(types) {
            this.loading1 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading1 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading1 = false;
                this.x_duration = res.data.list.map((item) => {
                    return item.duration;
                });
                for (let i in this.durationData) {
                    this.durationData[i].value = res.data.list.map((item) => {
                        return item[this.durationData[i].name];
                    });
                }
                this.timeChart(this.durationData);
            }
        },

        // 互动数据
        timeChart(datas) {
            let series = [];
            datas.forEach((item) => {
                series.push({
                    smooth: true,
                    showSymbol: false,
                    name: item.title,
                    type: "line",
                    data: item.value,
                    lineStyle: {
                        width: 2,
                    },
                });
            });
            var option = {
                title: {},
                color: ["#4475FF", "#36D39A", "#FFC37D", "#00AEB9", "#FF7A7A"],
                legend: {
                    itemHeight: 4,
                    icon: "rect",
                    data: series.map((item) => {
                        return item.name;
                    }),
                },
                grid: {
                    left: "2%",
                    right: "2%",
                    bottom: "0%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    textStyle: {
                        align: "left",
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#B4B7BD",
                            width: 0,
                            type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: this.x_duration,
                },
                yAxis: {
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#F0F0F0",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#B4B7BD",
                        },
                    },
                },
                series: series,
            };
            const myChart = this.$echarts.init(
                document.getElementById("timeChart")
            );
            console.log(option)
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取八大人群
        async getCrowd(types) {
            this.loading2 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading2 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading2 = false;
                let crowdData = [
                    {
                        title: "新锐白领",
                        name: "1100300000",
                        value: "0",
                    },
                    {
                        title: "都市银发",
                        name: "1100300001",
                        value: "0",
                    },
                    {
                        title: "精致妈妈",
                        name: "1100500000",
                        value: "0",
                    },
                    {
                        title: "都市蓝领",
                        name: "1101100000",
                        value: "0",
                    },
                    {
                        title: "Z时代",
                        name: "1101259358",
                        value: "0",
                    },
                    {
                        title: "小镇青年",
                        name: "1101461650",
                        value: "0",
                    },
                    {
                        title: "资深中产",
                        name: "1101461651",
                        value: "0",
                    },
                    {
                        title: "小镇中老年",
                        name: "1111831289",
                        value: "0",
                    },
                    {
                        title: "其他",
                        name: "0",
                        value: "0",
                    },
                ];
                crowdData.forEach((item) => {
                    for (let i in res.data.list) {
                        if (item.name == res.data.list[i].eight_id) {
                            item.value = res.data.list[i].value;
                        }
                    }
                });
                this.rqChart(crowdData);
            }
        },

        // 八大人群
        rqChart(datas) {
            var option = {
                color: ["#4475FF"],
                grid: {
                    top: "10%",
                    left: "2%",
                    right: "2%",
                    bottom: "0%",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                xAxis: {
                    type: "category",
                    data: datas.map((item) => {
                        return item.title;
                    }),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#B4B7BD",
                            width: 0,
                            type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#F0F0F0",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#B4B7BD",
                        },
                    },
                },
                series: [
                    {
                        data: datas.map((item) => {
                            return item.value;
                        }),
                        type: "bar",
                        barWidth: "50%",
                        itemStyle: {
                            normal: {
                                barBorderRadius: [2, 2, 0, 0],
                            },
                        },
                    },
                ],
            };

            const myChart = this.$echarts.init(
                document.getElementById("rqChart")
            );
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取地域分布
        async getRegion(types) {
            this.loading3 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading3 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading3 = false;
                this.dyChart(res.data.list);
            }
        },

        // 地域分布
        dyChart(datas) {
            var option = {
                color: ["#4475FF"],
                grid: {
                    top: "10%",
                    left: "2%",
                    right: "2%",
                    bottom: "40",
                    containLabel: true,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                dataZoom: [
                    {
                        dataBackground: {
                            areaStyle: {
                                opacity: 0.9,
                                color: "#E3E3E3",
                                width: 0.5,
                            },
                            lineStyle: {
                                opacity: 0.9,
                                color: "#E3E3E3",
                                width: 0.5,
                            },
                        },
                        type: "slider",
                        show: true,
                        height: 15,
                        bottom: "12ph",
                        borderColor: "#f1f1f1",
                        backgroundColor: "#fff",
                        handleColor: "#8FDFFE",
                        handleSize: 15,
                        start: 0,
                        end: 30,
                        brushSelect: true,
                    },
                    {
                        type: "inside",
                        disabled: true,
                    },
                ],
                xAxis: {
                    type: "category",
                    data: datas.map((item) => {
                        return item.region_name;
                    }),
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#B4B7BD",
                            width: 0,
                            type: "dashed",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#F0F0F0",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#B4B7BD",
                        },
                    },
                },
                series: [
                    {
                        data: datas.map((item) => {
                            return item.value;
                        }),
                        type: "bar",
                        barWidth: "50%",
                        itemStyle: {
                            normal: {
                                barBorderRadius: [2, 2, 0, 0],
                            },
                        },
                    },
                ],
            };

            const myChart = this.$echarts.init(
                document.getElementById("dyChart")
            );
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取年龄
        async getAge(types) {
            this.loading4 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading4 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading4 = false;
                let list = res.data.list;
                let ageData = [
                    {
                        name: "18-23",
                        age: "18",
                        value: "0",
                    },
                    {
                        name: "24-30",
                        age: "24",
                        value: "0",
                    },
                    {
                        name: "31-40",
                        age: "31",
                        value: "0",
                    },
                    {
                        name: "41-50",
                        age: "41",
                        value: "0",
                    },
                    {
                        name: "50+",
                        age: "50",
                        value: "0",
                    },
                    {
                        name: "其他",
                        age: "0",
                        value: "0",
                    },
                ];
                ageData.forEach((item) => {
                    list.forEach((val) => {
                        if (item.age == val.age) {
                            item.value = val.value;
                        }
                    });
                });
                this.ageChart(ageData);
            }
        },

        //年龄分布
        ageChart(datas) {
            const option = {
                color: [
                    "#FF8985",
                    "#4475FF",
                    "#FFC771",
                    "#24BF9A",
                    "#1E60E0",
                    "#EE8C0F",
                ],
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "bottom",
                    left: "center",
                    icon: "circle",
                    itemHeight: 4,
                },
                series: [
                    {
                        name: "年龄分布",
                        type: "pie",
                        radius: ["60%", "90%"],
                        center: ["50%", "45%"],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            show: false,
                            position: "center",
                        },
                        // emphasis: {
                        //     label: {
                        //         show: true,
                        //         fontSize: "40",
                        //         fontWeight: "bold",
                        //     },
                        // },
                        labelLine: {
                            show: false,
                        },
                        label: {
                            show: true,
                            color: "#fff",
                            position: "inside",
                            formatter: function (value) {
                                return value.percent.toFixed(0) + "%";
                            },
                        },
                        data: datas,
                    },
                ],
            };

            const myChart = this.$echarts.init(
                document.getElementById("ageChart")
            );
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取性别
        async getGender(types) {
            this.loading5 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading5 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading5 = false;
                let list = res.data.list;
                let genderData = [
                    {
                        gender: 1,
                        name: "男",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                1,
                                0,
                                0,
                                0,
                                [
                                    { offset: 0, color: "#188df0" },
                                    { offset: 1, color: "#83bff6" },
                                ]
                            ),
                        },
                        value: "0",
                    },
                    {
                        gender: 2,
                        name: "女",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                1,
                                0,
                                0,
                                0,
                                [
                                    { offset: 0, color: "#FFE0B1" },
                                    { offset: 1, color: "#FEC062" },
                                ]
                            ),
                        },
                        value: "0",
                    },
                    {
                        gender: 0,
                        name: "其他",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                1,
                                0,
                                0,
                                0,
                                [
                                    { offset: 0, color: "#AFF4E3" },
                                    { offset: 1, color: "#00D5A2" },
                                ]
                            ),
                        },
                        value: "0",
                    },
                ];
                genderData.forEach((item) => {
                    list.forEach((val) => {
                        if (item.gender == val.gender) {
                            item.value = val.value;
                        }
                    });
                });
                this.sexChart(genderData);
            }
        },

        // 性别分布
        sexChart(datas) {
            var option = {
                color: ["#4475FF", "#FEC062", "#AFF4E3"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    top: "10%",
                    left: "1%",
                    right: "20%",
                    bottom: 0,
                    containLabel: true,
                },
                xAxis: {
                    show: false,
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "category",
                    inverse: true,
                    data: datas.map((item) => {
                        return item.name;
                    }),
                    splitLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                        show: true,
                        fontSize: 12,
                        color: "#616C85",
                        margin: 20,
                    },
                    axisLine: { show: false },
                },
                series: [
                    {
                        data: datas,
                        type: "bar",
                        barWidth: "20%",
                        label: {
                            show: true,
                            position: "right",
                            color: "#616C85",
                            fontSize: 12,
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: [30, 30, 30, 30],
                            },
                        },
                    },
                ],
            };
            const myChart = this.$echarts.init(
                document.getElementById("sexChart")
            );
            myChart.setOption(option, true);
            window.onresize = function () {
                myChart.resize();
            };
        },

        //获取行业品类
        async getCategory(types) {
            this.loading6 = true;
            this.queryInfo.types = types;
            const { data: res } = await this.$http.post(
                "/adminapi/Materialv2/analysis",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading6 = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading6 = false;
                let list = [];
                res.data.list.forEach((item) => {
                    list.push({
                        tag_id: item.tag_id,
                        name: item.tag_name,
                        value: item.value,
                        tag_level: item.tag_level,
                    });
                });
                this.hyChart(list);
            }
        },

        // 行业分布
        hyChart(datas) {
            let that = this;
            var option = {
                tooltip: {},
                series: [
                    {
                        type: "wordCloud",
                        gridSize: 5,
                        sizeRange: [12, 18],
                        rotationRange: [0, 0],
                        shape: "pentagon",
                        width: "100%",
                        height: "100%",
                        drawOutOfBound: true,
                        textStyle: {
                            fontFamily: "sans-serif",
                            fontWeight: "bold",
                            color: function () {
                                return (
                                    "rgb(" +
                                    [
                                        Math.round(Math.random() * 200 + 55),
                                        Math.round(Math.random() * 200 + 55),
                                        Math.round(Math.random() * 200 + 55),
                                    ].join(",") +
                                    ")"
                                );
                            },
                        },
                        emphasis: {
                            textStyle: {
                                shadowBlur: 10,
                                shadowColor: "#333",
                            },
                        },
                        data: datas,
                    },
                ],
            };
            const chart = this.$echarts.init(
                document.getElementById("hyChart")
            );
            chart.setOption(option, true);
            window.onresize = function () {
                chart.resize();
            };
            chart.off("click");
            chart.on("click", function (value) {
                if (value.data.tag_level == 2) {
                    return;
                } else {
                    that.queryInfo.tag_level = 2;
                    that.queryInfo.tag_id = value.data.tag_id;
                    that.seconText = "/" + value.name;
                    that.getCategory("audience_category");
                }
            });
        },

        // 点击返回一级
        retureFirst() {
            if (this.queryInfo.tag_level == 1) {
                return;
            } else {
                this.seconText = "";
                this.queryInfo.tag_level = 1;
                this.queryInfo.tag_id = "";
                this.getCategory("audience_category");
            }
        },
    },
    components: {},
};
</script>


<style scoped>
.ana_title {
    font-size: 14px;
    color: #17233d;
    padding-left: 8px;
    position: relative;
}
.ana_title::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: #4475ff;
    border-radius: 1px;
}
.mt_20 {
    margin-top: 20px;
}
.border {
    border: 1px solid #ebebeb;
    border-radius: 4px;
}
.demand_head {
    height: 119px;
}
.ana_img {
    position: relative;
    width: 50px;
    height: 78px;
    border-radius: 4px;
    overflow: hidden;
}
.logo_img {
    display: block;
    width: 100%;
    height: 100%;
}
.ana_type {
    position: absolute;
    width: 31px;
    height: 16px;
    font-size: 12px;
    color: #fff;
    line-height: 16px;
    text-align: center;
    border-radius: 2px;
    top: 0;
    right: 0;
}
.ana_type_blue {
    background: #4475ff;
}
.ana_type_green {
    background: #00bc4b;
}
.ana_info {
    margin-left: 16px;
}
.ana_name {
    font-size: 18px;
    color: #17233d;
    line-height: 25px;
    font-weight: bold;
}
.ana_base {
    margin-top: 16px;
}
.ana_time {
    font-size: 12px;
    color: #616c85;
    height: 23px;
    line-height: 23px;
    padding: 0 8px;
    border: 1px solid #ebebeb;
    margin-right: 16px;
    border-radius: 2px;
}
.big_left {
    width: 210px;
    height: 374px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
#media {
    width: 210px;
    height: 374px;
}
.big_right {
    margin-left: 23px;
}
#main {
    width: 500px;
    height: 500px;
    margin: 0;
}
.renqu_box {
    padding: 20px;
}
.age_box {
    flex-shrink: 0;
}
.age_mg {
    margin: 0 20px;
}
.blue_text {
    color: #4475ff;
}
.first_text {
    cursor: pointer;
}
.ana_tips {
    height: 32px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    padding: 0 20px;
    margin-bottom: 20px;
}
</style>

